@page "/circular-gauge/default-functionalities"

@using Syncfusion.Blazor.CircularGauge

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates the default rendering of the circular gauge.</p>
</SampleDescription>
<ActionDescription>
    <p> In this example, you can see how to render a default circular gauge. The circular gauge component circularly visualizes the numerical scales values. In this sample, an axis with a pointer has been used. You can use <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.CircularGauge.CircularGaugeAxes_properties.html'>CircularGaugeAxes</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRanges.html'>CircularGaugeRanges</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointers.html'>CircularGaugePointers</a></code> to customize the default appearance of the gauge.</p>
    <p>More information on the circular gauge can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/getting-started'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfCircularGauge>
        <CircularGaugeAxes>
            <CircularGaugeAxis Radius="80%" StartAngle="230" EndAngle="130">
                <CircularGaugeAxisLabelStyle Offset="-5">
                    <CircularGaugeAxisLabelFont FontFamily="Roboto" Size="12px" FontWeight="Regular"/>
                </CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisLineStyle Width="8" Color="#E0E0E0"/>
                <CircularGaugeAxisMajorTicks Width="0.01"/>
                <CircularGaugeAxisMinorTicks Width="0.01"/>
                <CircularGaugePointers>
                    <CircularGaugePointer Value=60 Radius="60%" Color="#757575" PointerWidth="7">
                        <CircularGaugeCap Radius="8" Color="#757575">
                            <CircularGaugeCapBorder Width="0"/>
                        </CircularGaugeCap>
                        <CircularGaugeNeedleTail Color="#757575" Length="25%"/>
                    </CircularGaugePointer>
                </CircularGaugePointers>
            </CircularGaugeAxis>
        </CircularGaugeAxes>
    </SfCircularGauge>
</div>
